// @ts-nocheck
import { Form, Button, Row, Col, Checkbox, Radio } from 'antd'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import { Input, Select, TextArea, InputEdit, InputNumber } from '@/components'
import ReactJson from '@/components/ReactJsonView'
import styles from './index.module.less'
import { getType } from '@/utils'

const renderFitTypeItem = ({
  field,
  name,
  getFieldValue,
  getFieldsValue,
  setFieldsValue,
  setFields,
  resetFields
}) => {
  const type = getFieldValue([field, name, 'type'])
  const fieldValue = [...getFieldValue(field)]
  const value = getFieldValue([field, name, 'default'])
  const onChange = (val) => {
    fieldValue[name]['default'] = val
    setFieldsValue({field: fieldValue})
  }
  switch (type) {
    case 'number':
      return <InputNumber />
    case 'boolean':
      return (
        <Radio.Group
          options={[
            { label: 'true', value: true },
            { label: 'false', value: false }
          ]}
        />
      )
    case 'string':
      return <Input placeholder="请输入变量赋值" />
    case 'array':
      return (
        <ReactJson
          json={value}
          onChange={onChange}
        />
      )
    case 'object':
      return (
        <ReactJson
          json={value}
          onChange={onChange}
        />
      )
    default:
      return <Input placeholder="请输入变量赋值" />
  }
}

const AddVariablesFormItems = ({ field = 'formList' }) => {
  const form = Form.useFormInstance()
  const handleTypeChange = (type, field, name) => {
    let value
    switch (type) {
      case 'number':
        value = 0
        break
      case 'string':
        value = ''
        break
      case 'boolean':
        value = true
        break
      case 'array':
        value = []
        break
      case 'object':
        value = {}
        break
      default:
        break
    }
    form.setFields([{ name: [field, name, 'default'], value, errors: null }])
  }
  return (
    <div className={styles['variable-card']}>
      <Form.List name={field}>
        {(fields, { add, remove }) => {
          return (
            <>
              {fields.map(({ key, name, ...restField }) => {
                return (
                  <div className="variable-card-item" key={key}>
                    <Row className="variable-card-header">
                      <Col span={12}>
                        <Form.Item
                          {...restField}
                          name={[name, 'display']}
                          rules={[
                            { required: true, message: '请输入变量名称' }
                          ]}
                        >
                          <InputEdit />
                        </Form.Item>
                      </Col>
                      <Col span={12} className="variable-card-delete-icon">
                        <DeleteOutlined onClick={() => remove(name)} />
                      </Col>
                    </Row>
                    <Row>
                      <Col span={18}>
                        <Form.Item
                          {...restField}
                          labelCol={{ span: 8 }}
                          label="变量标识"
                          name={[name, 'name']}
                          rules={[
                            { required: true, message: '请输入变量标识' }
                          ]}
                        >
                          <Input placeholder="请输入变量标识" />
                        </Form.Item>
                      </Col>
                      <Col span={5} offset={1}>
                        <Form.Item
                          {...restField}
                          name={[name, 'required']}
                          valuePropName="checked"
                        >
                          <Checkbox>必填</Checkbox>
                        </Form.Item>
                      </Col>
                    </Row>
                    <Form.Item
                      {...restField}
                      label="数据类型"
                      name={[name, 'type']}
                      rules={[{ required: true, message: '请选择数据类型' }]}
                    >
                      <Select
                        placeholder="请选择数据类型"
                        options={[
                          { label: '数字', value: 'number' },
                          { label: '字符串', value: 'string' },
                          { label: '布尔', value: 'boolean' },
                          { label: '数组', value: 'array' },
                          { label: '对象', value: 'object' }
                        ]}
                        onChange={type => handleTypeChange(type, field, name)}
                      />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      label="变量赋值"
                      name={[name, 'defined']}
                    >
                      <Radio.Group
                        options={[
                          { label: '预定义', value: 0 },
                          { label: '调度时定义', value: 1 }
                        ]}
                      />
                    </Form.Item>
                    <Form.Item
                      noStyle
                      shouldUpdate={(pre, cur) => {
                        return (
                          pre?.[field]?.[name]?.['defined'] !==
                            cur?.[field]?.[name]?.['defined'] ||
                          pre?.[field]?.[name]?.['required'] !==
                            cur?.[field]?.[name]?.['required'] ||
                          pre?.[field]?.[name]?.['type'] !==
                            cur?.[field]?.[name]?.['type']
                        )
                      }}
                    >
                      {({
                        getFieldValue,
                        getFieldsValue,
                        setFieldsValue,
                        setFields,
                        resetFields
                      }) => {
                        if (getFieldValue([field, name, 'defined']) === 0) {
                          return (
                            <Form.Item
                              {...restField}
                              wrapperCol={{ offset: 6 }}
                              name={[name, 'default']}
                              rules={[
                                {
                                  required: getFieldValue([
                                    field,
                                    name,
                                    'required'
                                  ]),
                                  message: '请输入变量初始值'
                                }
                              ]}
                            >
                              {renderFitTypeItem({
                                field,
                                name,
                                getFieldValue,
                                getFieldsValue,
                                setFieldsValue,
                                setFields,
                                resetFields
                              })}
                            </Form.Item>
                          )
                        }
                      }}
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      label="变量描述"
                      name={[name, 'description']}
                    >
                      <TextArea placeholder="请输入描述信息" />
                    </Form.Item>
                  </div>
                )
              })}
              <Button
                type="primary"
                onClick={() =>
                  add({ display: `变量${fields.length + 1}`, defined: 0 })
                }
                block
                icon={<PlusOutlined />}
              >
                添加变量
              </Button>
            </>
          )
        }}
      </Form.List>
    </div>
  )
}

export default AddVariablesFormItems
